<!DOCTYPE html>

<!-- Copyright (c) 2013, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<!--
/**
 * spark-button is a clickable element that can have arbitrary content provided
 * in the inner HTML. A button can be:
 *
 * * [raised] (default) or [flat],
 * * rectangular (default) or [round]
 * * [primary] (changes the background and/or text colors)
 * * enabled (default) or [disabled]
 * * padded to various degrees: [padding] = "none", "small", "medium", "large"
 * * changing the background or foreground on hover:
 *   [hoverStyle] ="background", "foreground"
 *
 * Example:
 *
 *     <spark-button raised on-click="{{onClose}}">Close</spark-button>
 *
 *     <spark-button flat round on-click="{{openMenu}}">
 *       <spark-icon src="menu.png"></spark-icon>
 *     <spark-button>
 */
-->

<link rel="import" href="../../../packages/spark_widgets/common/spark_widget.html"/>

<polymer-element name="spark-button" extends="spark-widget"
    attributes="raised
                flat
                round
                primary
                padding
                hoverStyle
                disabled
                active
                tooltip
                command"
    padding="large">
  <template>
    <link rel="stylesheet" href="spark_button.css">

    <div id="button" focused tabindex="0" title="{{tooltip}}"
        on-click="{{handleClick}}">
      <div id="focusBg"></div>
      <div id="content">
        <content></content>
      </div>
    </div>
  </template>

  <script type="application/dart" src="spark_button.dart"></script>
</polymer-element>
